μ맨ν±νκ³ μ μ§λ³΄μκ° μ©μ΄ν λ°μν μΉ λ μ΄μμμ μν΄ CSS 그리λ μμμ κ°λ ₯ν¨μ νμ©νμΈμ. λͺ νν μμ μ΄λ¦μ μ§μ νκ³ μ λ¬Έκ°μ μ‘°μΈμΌλ‘ λͺ¨λ κΈ°κΈ°μμ μ μ°νκ² λμμΈμ μ μ©νλ λ²μ μ΅νμΈμ.
CSS 그리λ μμ: μλ§¨ν± λ μ΄μμ λͺ λͺ λ° λ°μν λμμΈ λ§μ€ν°λ¦¬
μλμ μΈ μΉ κ°λ° μΈκ³μμ κ²¬κ³ νκ³ μ μ§λ³΄μκ° μ©μ΄νλ©° λ°μν λ μ΄μμμ λ§λλ κ²μ 무μλ³΄λ€ μ€μν©λλ€. CSS 그리λ λ μ΄μμμ νμ΄μ§ ꡬ쑰μ μ κ·Όνλ λ°©μμ νμ νμ¬, λΉκ΅ν μ μλ μμ€μ μ μ΄λ ₯κ³Ό μ μ°μ±μ μ 곡ν©λλ€. κ°μ₯ κ°λ ₯ν κΈ°λ₯ μ€ νλλ 그리λ λ΄μμ νλͺ©μ μ μνκ³ λ°°μΉνλ μλ§¨ν± μ κ·Ό λ°©μμΈ CSS 그리λ μμμ λλ€. μ΄ κ°μ΄λλ CSS 그리λ μμμ΄ λ μ΄μμ κ°λ μ±μ λμ΄κ³ μλ§¨ν± κ΅¬μ‘°λ₯Ό μ΄μ§νλ©° λͺ¨λ μ₯μΉμμ μννκ² μ μνλ μ κ΅ν λ°μν λμμΈμ λ§λ€ μ μλλ‘ μ§μνλ λ°©λ²μ λν΄ μ¬μΈ΅μ μΌλ‘ λ€λ£° κ²μ λλ€.
κΈ°μ΄ μ΄ν΄νκΈ°: CSS 그리λ λ μ΄μμ
그리λ μμμ λ°μ΄λ€κΈ° μ μ CSS 그리λ λ μ΄μμ μ체μ ν΅μ¬ κ°λ μ νμ νλ κ²μ΄ μ€μν©λλ€. 그리λ λ μ΄μμμ μΉ νμ΄μ§λ₯Ό κ°λ³μ μΈ νκ³Ό μ΄λ‘ λλκ³ , κ·Έ λΆν μμ μμ μ½ν μΈ λ₯Ό μ λ°νκ² λ°°μΉν μ μλλ‘ νλ 2μ°¨μ λ μ΄μμ μμ€ν μ λλ€. μ£Όλ‘ 1μ°¨μ λ μ΄μμ μμ€ν (ν λλ μ΄)μΈ Flexboxμ λ¬λ¦¬, 그리λλ 볡μ‘ν νμ΄μ§ μμ€ λ μ΄μμμ κ΄λ¦¬νλ λ° νμν©λλ€.
κΈ°μ΅ν΄μΌ ν μ£Όμ μ©μ΄:
- 그리λ 컨ν
μ΄λ:
display: grid;λλdisplay: inline-grid;κ° μ μ©λλ μμμ λλ€. μ΄ μμλ λͺ¨λ μ§μ μ μΈ κ·Έλ¦¬λ νλͺ©μ λΆλͺ¨κ° λ©λλ€. - 그리λ νλͺ©: 그리λ 컨ν μ΄λμ μ§μ μ μΈ μμ μμμ λλ€. μ΄ μμλ€μ΄ 그리λ λ΄μ λ°°μΉλ©λλ€.
- 그리λ λΌμΈ: 그리λ ꡬ쑰λ₯Ό ꡬμ±νλ μν λ° μμ§ κ΅¬λΆμ μ λλ€.
- 그리λ νΈλ: λ μΈμ ν 그리λ λΌμΈ μ¬μ΄μ 곡κ°μΌλ‘, ν λλ μ΄μ΄ λ μ μμ΅λλ€.
- 그리λ μ : 그리λμ κ°μ₯ μμ λ¨μλ‘, 그리λ νκ³Ό 그리λ μ΄μ κ΅μ°¨μ μ λλ€.
- 그리λ μμ: λ€ κ°μ 그리λ λΌμΈμ μν΄ μμ±λ μ§μ¬κ°ν μμμΌλ‘, νλ μ΄μμ 그리λ νλͺ©μ λ°°μΉνλ λ° μ¬μ©λ μ μμ΅λλ€.
CSS 그리λ μμ μκ°: λͺ λͺ μ ν
CSS 그리λ μμμ 그리λ λ μ΄μμ λ΄μμ κ°λ³ μμμ μ μνκΈ° μν μμ μμ€μ μΆμνλ₯Ό μ 곡ν©λλ€. λ¨μν λΌμΈ λ²νΈλ μ€ν¨λ μμ±μ μμ‘΄νλ λμ , 그리λμ νΉμ μμμ μλ―Έ μλ μ΄λ¦μ ν λΉν μ μμ΅λλ€. μ΄λ μλ§¨ν± λͺ νμ± κ³μΈ΅μ λμ νμ¬ λ μ΄μμ μ½λλ₯Ό ν¨μ¬ λ μ½κΈ° μ½κ³ μ μ§λ³΄μνκΈ° μ½κ² λ§λλλ€.
그리λ μμμ νμ±ννλ ν΅μ¬ μμ±μ λ€μκ³Ό κ°μ΅λλ€:
grid-template-areas: λͺ λͺ λ 그리λ μμμ μ°Έμ‘°νμ¬ κ·Έλ¦¬λμ λ μ΄μμμ μ μν©λλ€.grid-area: 그리λ νλͺ©μ λͺ λͺ λ 그리λ μμμ ν λΉν©λλ€.
grid-template-areasλ‘ λ μ΄μμ μ μνκΈ°
grid-template-areas μμ±μ λ§λ²μ΄ μΌμ΄λλ κ³³μ
λλ€. μ΄ μμ±μ μ¬μ©νλ©΄ CSS λ΄μμ 그리λ ꡬ쑰λ₯Ό μκ°μ μΌλ‘ ννν μ μμ΅λλ€. κ° νμ λ³λμ λ¬Έμμ΄ κ°μΌλ‘ μ μνκ³ , κ° λ¬Έμμ΄ λ΄μ μ΄μ λ°μ΄νλ‘ λ¬ΆμΈ μ΄λ¦μ μ¬μ©νμ¬ μ μν©λλ€. λΉ λ¬Έμμ΄('') λλ λ§μΉ¨ν(.)λ₯Ό μ¬μ©νμ¬ λΉμ΄μλ 그리λ μ
μ λνλΌ μ μμ΅λλ€.
μΌλ°μ μΈ μΉμ¬μ΄νΈ λ μ΄μμμ κ³ λ €ν΄ λ΄ μλ€:
HTML ꡬ쑰:
<div class=\"grid-container\">
<header class=\"header\">Header</header>
<nav class=\"nav\">Navigation</nav>
<main class=\"main\">Main Content</main>
<aside class=\"sidebar\">Sidebar</aside>
<footer class=\"footer\">Footer</footer>
</div>
grid-template-areasλ₯Ό μ¬μ©ν CSS:
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
\"header header\"
\"nav main\"
\"sidebar main\"
\"footer footer\";
gap: 20px;
height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
μ΄ μμμμλ λ€μκ³Ό κ°μ΅λλ€:
- λ κ°μ μ΄(
1frκ³Ό3fr)κ³Ό μΈ κ°μ ν(auto,1fr,auto)μ κ°μ§ 그리λ 컨ν μ΄λκ° μμ΅λλ€. grid-template-areasμμ±μ μ΄λ¬ν λͺ λͺ λ μμμ΄ κ·Έλ¦¬λ μ μ μ΄λ»κ² μ°¨μ§ν μ§ μκ°μ μΌλ‘ λ§€νν©λλ€. 첫 λ²μ§Έ λ¬Έμμ΄\"header header\"λ 'header' μμμ΄ μ²« λ²μ§Έ νμ λ μ΄μ λͺ¨λ μ°¨μ§ν¨μ λνλ λλ€.- λ λ²μ§Έ λ¬Έμμ΄
\"nav main\"μ 'nav'λ₯Ό λ λ²μ§Έ νμ 첫 λ²μ§Έ μ΄μ, 'main'μ λ λ²μ§Έ μ΄μ λ°°μΉν©λλ€. - μΈ λ²μ§Έ λ¬Έμμ΄
\"sidebar main\"μ 'sidebar'λ₯Ό μΈ λ²μ§Έ νμ 첫 λ²μ§Έ μ΄μ, 'main'μ λ€μ λ λ²μ§Έ μ΄μ λ°°μΉν©λλ€. μ¬κΈ°μ 'main'μ΄ λ νμ κ±Έμ³ μμμ μ£Όλͺ©νμμμ€. - λ§μ§λ§ λ¬Έμμ΄
\"footer footer\"λ 'footer' μμμ μν΄ λ§μ§λ§ νμ λ μ΄μ λͺ¨λ μ°¨μ§ν©λλ€.
κ° μμ μμμ grid-area μμ±μ΄ grid-template-areasμ μ¬μ©λ μ΄λ¦κ³Ό μ§μ μ μΌλ‘ μΌμΉνλ λ°©μμ μ£Όλͺ©νμμμ€. μ΄λ κ° μ½ν
μΈ μ‘°κ°μ΄ μ΄λμ μνλμ§ μ΄ν΄νλ κ²μ λ§€μ° μ§κ΄μ μΌλ‘ λ§λλλ€.
그리λ μμμ λͺ λͺ νλ μ΄μ : μλ§¨ν± μ΄μ
그리λ μμμ μ§μ ν νμ μ맨ν±ν μλ―Έμ μμ΅λλ€. 'header', 'nav', 'main', 'sidebar', 'footer'μ κ°μ μ΄λ¦μ ν λΉν¨μΌλ‘μ¨ λ¨μν μμλ₯Ό λ°°μΉνλ κ²μ λμ΄ μΉ νμ΄μ§μ 건μΆμ μΈ μμμ μ μνλ κ²μ λλ€. μ΄λ λ€μκ³Ό κ°μ μ¬λ¬ κ°μ§ μ€μν μ΄μ μ μ 곡ν©λλ€:
- κ°λ μ± ν₯μ: CSSλ₯Ό κ²ν ν λ, HTML ꡬ쑰λ₯Ό λ³΄μ§ μμλ λ μ΄μμμ κ° μΉμ μ΄ μ΄λ€ μν μ νλμ§ μ¦μ λͺ ννκ² μ μ μμ΅λλ€. μ΄λ ν νμ λ° μ₯κΈ° νλ‘μ νΈ μ μ§λ³΄μμ λ§€μ° μ€μν©λλ€.
- μ μ§λ³΄μμ± ν₯μ: λ μ΄μμμ 리ν©ν λ§νκ±°λ κ΅¬μ± μμλ₯Ό μ΄λν΄μΌ ν κ²½μ°, 볡μ‘ν λΌμΈ λ²νΈλ μ€ν¨λ κ³μ°μ μ‘°μ ν νμ μμ΄ μμμ
grid-areaμμ±μ λ¨μν μ¬ν λΉνμ¬ μνν μ μλ κ²½μ°κ° λ§μ΅λλ€. - μλ§¨ν± λͺ νμ±: μ΄λ¦μ μλλ μ½ν μΈ μ κΈ°λ₯μ λ°μνμ¬ μκ°μ λ μ΄μμμ HTML μμμ κΈ°λ³Έ μλ§¨ν± μλ―Έμ μΌμΉμν΅λλ€.
- μμ¬μ΄ μ¬κ΅¬μ‘°ν: λ μ΄μμ ꡬ쑰λ₯Ό λ³κ²½νλ κ²μ
grid-template-areasλ₯Ό μ¬μ μνλ λ¬Έμ μ΄λ©°, μ΄λ κ°λ³ 그리λ νλͺ© λ°°μΉλ₯Ό μ‘°μνλ κ²λ³΄λ€ λ μκ°μ μ΄κ³ μ§κ΄μ μΈ νλ‘μΈμ€μ λλ€.
μ¬μ΄λλ°κ° λ©μΈ μ½ν μΈ λ³΄λ€ λ¨Όμ λνλλλ‘ λ μ΄μμμ λ³κ²½ν΄μΌ νλ μλ리μ€λ₯Ό κ³ λ €ν΄ λ³΄μμμ€. λͺ λͺ λ μμμ μ¬μ©νλ©΄ μ΄λ κ°λ¨ν μ‘°μ μΌλ‘ κ°λ₯ν©λλ€:
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
\"header header\"
\"main sidebar\" /* Changed order here */
\"footer footer\";
gap: 20px;
height: 100vh;
}
/* The grid-area assignments for the items remain the same */
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
μ΄ μμ λ μμμμλ grid-template-areas μ μκ° 'main'κ³Ό 'sidebar'μ μμΉλ₯Ό μ ννλλ‘ μ
λ°μ΄νΈλμμ΅λλ€. κ²°μ μ μΌλ‘, μμ μμμ grid-area ν λΉμ λ³κ²½λμ§ μμμΌλ©°, μ΄λ μ΄ μλ§¨ν± μ κ·Ό λ°©μμ κ°λ ₯ν¨μ 보μ¬μ€λλ€.
그리λ μμμΌλ‘ λ°μν λμμΈ λ§λ€κΈ°
CSS 그리λ μμμ κ°μ₯ μ€μν μ₯μ μ€ νλλ λ°μν λμμΈμ μ©μ΄νκ² νλ€λ κ²μ
λλ€. λ―Έλμ΄ μΏΌλ¦¬λ₯Ό μ¬μ©νλ©΄ λ€λ₯Έ νλ©΄ ν¬κΈ°μμ grid-template-areasλ₯Ό μ¬μ μνμ¬ μ΅μνμ μ½λλ‘ λ μ΄μμμ μμ ν λ³νν μ μμ΅λλ€.
μ΄μ μμλ₯Ό νμ₯νμ¬ λ°μν κΈ°λ₯μ ν΅ν©ν΄ λ³΄κ² μ΅λλ€. μμ νλ©΄μμλ λͺ¨λ μΉμ μ΄ μμ§μΌλ‘ μμ΄λ λ¨μΌ μ΄ λ μ΄μμμ μν μ μμ΅λλ€.
/* Mobile-first approach */
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto;
grid-template-areas:
\"header\"
\"nav\"
\"main\"
\"sidebar\"
\"footer\";
gap: 15px;
height: auto; /* Allow height to adjust naturally */
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
/* Tablet and Desktop adjustments */
@media (min-width: 768px) {
.grid-container {
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
\"header header\"
\"nav main\"
\"sidebar main\"
\"footer footer\";
gap: 20px;
height: 100vh;
}
/* Re-assigning grid-area is often not needed here if the names are consistent,
but it's good to be aware that you *can* change them if necessary.
In this case, the names are just rearranged in the template areas. */
}
μ΄ λ°μν μμμμλ λ€μκ³Ό κ°μ΅λλ€:
- κΈ°λ³Έ(λͺ¨λ°μΌ μ°μ ) μ€νμΌμ κ° λͺ λͺ λ μμμ΄ μ체 νμ μ°¨μ§νλ λ¨μΌ μ΄ λ μ΄μμμ μ μν©λλ€.
768pxμ΄μμ λ―Έλμ΄ μΏΌλ¦¬λgrid-template-areasλ₯Ό μ¬μ μνμ¬ μ΄κΈ° λ°μ€ν¬ν± μμμ μ μ¬ν λ 볡μ‘ν λ€μ€ μ΄ λ μ΄μμμ λ§λλλ€.
μ΄ μ κ·Ό λ°©μμ νλ©΄ ν¬κΈ°μ λ°λΌ κ·Ήμ μΈ λ μ΄μμ λ³κ²½μ νμ©νλ©°, μ΄ λͺ¨λ κ²μ΄ grid-template-areas μμ±μ ν΅ν΄ μ°μνκ² κ΄λ¦¬λ©λλ€.
그리λ λ μ΄μμ κ΅μ ν
κΈλ‘λ² μ¬μ©μλ₯Ό μν΄ λμμΈν λ λ°μν λ μ΄μμμ μ€μνμ§λ§, λ€μν μ°κΈ° λͺ¨λμ μΈμ΄ μꡬ μ¬νμ μ μνλ κ²λ μ€μν©λλ€. CSS 그리λ, νΉν 그리λ μμμ μ΄μ λ§€μ° μ ν©ν©λλ€:
- μ€λ₯Έμͺ½-μΌμͺ½(RTL) μ§μ: μλμ΄λ νλΈλ¦¬μ΄μ κ°μ΄ μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ μ½λ μΈμ΄μμλ HTML μμμ
directionμμ±μ λ³κ²½νλ©΄ μ΄μ μκ°μ μμκ° μμ°μ€λ½κ² λ€μ§νλλ€. 그리λ μμμ μλ§¨ν± μ΄λ¦μ λ μ΄μμ μ¬λ‘―μ λ§€ννλ―λ‘, λͺ λͺ λ μμμ κ·Έ μλ―Έλ₯Ό μ μ§νμ§λ§ μκ°μ λ°°μΉλ μλμΌλ‘ μ‘°μ λ©λλ€. μλ₯Ό λ€μ΄, LTR λ μ΄μμμμ μΌμͺ½μ μλ 'sidebar'λgrid-template-areasκ° κ°λ μ μΌλ‘ μ μλκ³ μ λμ μΈ μΌμͺ½/μ€λ₯Έμͺ½ λ°°μΉμ λ¬Άμ΄μ§ μμ κ²½μ° RTL λ μ΄μμμμ μ€λ₯Έμͺ½μ λνλ©λλ€. - μΈμ΄ νμ₯: μΌλΆ μΈμ΄λ λ€λ₯Έ μΈμ΄λ³΄λ€ λ λ§μ 곡κ°μ νμλ‘ ν©λλ€. μ΄μ
frλ¨μμ κ°μ μ μ°ν λ¨μλ₯Ό μ¬μ©νκ³ νμautoλ‘ μ μν¨μΌλ‘μ¨, 그리λλ λ€μν μ½ν μΈ κΈΈμ΄λ₯Ό λ μ°μνκ² μμ©ν μ μμ΅λλ€. νΉμ λ μ΄μμμ΄ λ κΈ΄ λ¨μ΄ λλ λ¬Έμ₯μ κ°μ§ μΈμ΄μ λν΄ μλΉν μ‘°μ μ νμλ‘ νλ κ²½μ°, λ―Έλμ΄ μΏΌλ¦¬(λλ μ¬μ§μ΄ κΈ°λ₯ 쿼리)λ₯Ό μ¬μ©νμ¬ νΉμ μΈμ΄ μꡬ μ¬νμ λ§κ²grid-template-areasλ₯Ό μ¬μ μν μ μμ΅λλ€. - κ³μΈ΅μ λͺ λͺ : 볡μ‘ν λ μ΄μμμ λμμΈν λ, κ³μΈ΅μ μ€μμ± λλ μ½ν μΈ μ νμ λ°μνλ μμ μ΄λ¦μ κ³ λ €νμμμ€. μ΄λ λ€μν λ¬Έν λ° μΈμ΄μ λ§₯λ½μμ μ΄ν΄λ₯Ό λμ΅λλ€. μλ₯Ό λ€μ΄, λ¨μν 'content' λμ 'primary-content' λλ 'secondary-content'λ₯Ό μ¬μ©ν μ μμ΅λλ€.
RTL κ³ λ € μ¬ν μμ:
κΈ°λ³Έ μ½ν μΈ μμκ³Ό 보쑰 λ΄λΉκ²μ΄μ μμμ κ°μ§ λ μ΄μμμ΄ μλ€κ³ κ°μ ν΄ λ΄ μλ€.
HTML:
<div class=\"app-layout\">
<nav class=\"main-nav\">Navigation</nav>
<main class=\"content-area\">Main Content</main>
</div>
CSS (LTR):
.app-layout {
display: grid;
grid-template-columns: 150px 1fr;
grid-template-areas:
\"nav content\";
}
.main-nav { grid-area: nav; }
.content-area { grid-area: content; }
CSS (RTL - HTML λλ bodyμ direction: rtl;μ μΆκ°νμ¬ λ¬μ±):
컨ν
μ΄λ λλ μ‘°μμ direction: rtl;μ΄ μ μ©λλ©΄:
.app-layout {
display: grid;
grid-template-columns: 150px 1fr; /* Note: column widths behave differently in RTL */
grid-template-areas:
\"nav content\"; /* The semantic names still apply */
}
.main-nav { grid-area: nav; }
.content-area { grid-area: content; }
RTL νκ²½μμ λΈλΌμ°μ λ 1fr μ΄μ΄ μ΄μ μ€λ₯Έμͺ½μ, 150px μ΄μ΄ μΌμͺ½μ μμ΄μΌ νλ€λ κ²μ μλμΌλ‘ μ΄ν΄ν©λλ€. λͺ
λͺ
λ μ¬λ‘―μ κ°μ§ grid-template-areas μ μλ λμΌνκ² μ μ§λμ§λ§, ν΄λΉ μ¬λ‘―μ μκ°μ λ°°μΉλ λ€μ§νλλ€. 'nav' μμμ μ΄μ RTL νλ¦μ λ°λΌ μ€λ₯Έμͺ½μ λνλκ³ , 'content'λ μΌμͺ½μ λνλ©λλ€.
κ³ κΈ κΈ°μ λ° λͺ¨λ² μ¬λ‘
그리λ μμμ λ μ΄μμμ λ¨μννμ§λ§, μ΄λ₯Ό λ§μ€ν°νλ €λ©΄ λͺ κ°μ§ κ³ κΈ κΈ°μ μ μ΄ν΄νκ³ λͺ¨λ² μ¬λ‘λ₯Ό μ±νν΄μΌ ν©λλ€:
1. μΌκ΄λ λͺ λͺ κ·μΉ
그리λ μμμ λν΄ λͺ ννκ³ μΌκ΄λ λͺ λͺ κ·μΉμ μ€μ νμμμ€. λ€μμ΄ ν¬ν¨λ μ μμ΅λλ€:
- λͺ¨λ μλ¬Έμ:
header,main-content,side-nav - μ¬λ¬ λ¨μ΄ μ΄λ¦μ νμ΄ν μ¬μ©:
hero-section,product-gallery area1,column-2μ κ°μ μΌλ°μ μΈ μ΄λ¦ νΌνκΈ°.
μΌκ΄μ±μ μ μ§λ³΄μμ± λ° ν νμ μ ν΅μ¬μ λλ€.
2. λΉ μ
μ λ§μΉ¨ν(.) μ¬μ©
λͺ
λͺ
λ μμμΌλ‘ μλμ μΌλ‘ μ±μμ§μ§ μμ 그리λμ κ°κ²©μ΄ μλ κ²½μ°, λ§μΉ¨ν(.)λ₯Ό μ¬μ©νμ¬ μ΄λ¬ν λΉ μ
μ λνλ΄μμμ€. μ΄λ grid-template-areas μ μλ₯Ό λμ± λͺ
ννκ² λ§λλλ€.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
\"header header .\"
\"nav main .\"
\"footer footer .\";
}
μ¬κΈ°μλ κ° νμ μΈ λ²μ§Έ μ΄μ΄ μλμ μΌλ‘ λΉμ΄ μμ΅λλ€.
3. grid-areaλ‘ μ¬λ¬ ν λ° μ΄μ κ±Έμ³ λ°°μΉνκΈ°
grid-template-areasκ° μ 체 ꡬ쑰λ₯Ό μ μνλ λμ, grid-area λ¨μΆ μμ±μ μ¬μ©νμ¬ λ¨μΌ 그리λ νλͺ©μ΄ μ μλ λͺ
λͺ
λ μμ λ΄μμ μ¬λ¬ μ
μ κ±Έμ³ λ°°μΉλλλ‘ ν μλ μμ΅λλ€. μ΄ μμ±μ λ€ κ°μ§ κ°(<row-start> <column-start> <row-end> <column-end>)μ νμ©ν©λλ€. κ·Έλ¬λ λͺ
λͺ
λ μμμΌλ‘ μμ
ν λλ, κ±ΈμΉκ³ μΆμ μμμ μμ λ° λ λΌμΈμ μ§μ νκ±°λ, μ¬λ¬ μ
μ κ±Έμ³μ§λλ‘ μ μλ μμμ μ΄λ¦μ μ§μ μ§μ νμ¬ μ΄λ₯Ό λ¨μνν μ μμ΅λλ€.
'main'μ΄ λ μ΄μ κ±Έμ³ μλ μ΄ λ μ΄μμμ κ³ λ €ν΄ λ³΄μμμ€:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
\"header header header\"
\"nav main main\"
\"footer footer footer\";
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }
μ΄ κ²½μ°, main μμμ grid-template-areas μμ± μ체μμ λ μ΄μ κ±Έμ³μ§λλ‘ μ μλ©λλ€. μ΄κ²μ΄ λͺ
λͺ
λ μμμ μ¬μ©ν λ μ€ν¨λμ λ¬μ±νλ λ μ맨ν±ν λ°©λ²μ
λλ€.
λμμΌλ‘, νμν κ²½μ° λͺ μμ μΈ λΌμΈ λ²νΈλ₯Ό μ¬μ©ν μ μμ§λ§, μ΄λ μλ§¨ν± μ΄μ μ λ¨μ΄λ¨λ¦½λλ€:
/* Less semantic approach if names are available */
.main {
grid-column: 2 / 4; /* Span from column line 2 to 4 */
grid-row: 2 / 3; /* Span from row line 2 to 3 */
}
κΆμ₯ μ¬ν: λ λμ μλ§¨ν± λͺ
νμ±μ μν΄ νμ grid-template-areas λ΄μμ μ§μ μ€ν¨λμ μ μνμμμ€.
4. μμ κ²ΉμΉκΈ°
그리λ μμμ κ²ΉμΉ μ μμ΅λλ€. λ νλͺ©μ΄ λμΌν μμμ ν λΉλκ±°λ μ μλ μμμ΄ κ΅μ°¨νλ κ²½μ°, HTML μμ€ μμμμ λμ€μ μ€λ νλͺ©μ΄ μ΄μ μ μ€λ νλͺ© μμ λνλ©λλ€. μ΄λ ν μ€νΈ λ€μ λ°°λ μ΄λ―Έμ§μ κ°μ μμλ€μ κ²Ήμ³ λ°°μΉνλ λ° μ μ©ν μ μμ΅λλ€.
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas:
\"hero-image\"
\"hero-text\";
}
.hero-image {
grid-area: hero-image;
background-image: url('path/to/image.jpg');
background-size: cover;
}
.hero-text {
grid-area: hero-text;
align-self: center; /* Vertically center text */
text-align: center;
color: white;
}
/* To make them overlap visually on top of each other */
.hero-image {
grid-area: 1 / 1 / 2 / 2; /* Explicitly place image in the first cell */
}
.hero-text {
grid-area: 1 / 1 / 2 / 2; /* Place text in the same cell */
align-self: center;
text-align: center;
}
λ μμλ₯Ό λμΌν 그리λ μμ(λλ κ²ΉμΉλ μμ)μ ν λΉν¨μΌλ‘μ¨, .hero-text μμλ HTML μμ€μμ λμ€μ λνλκΈ° λλ¬Έμ .hero-image μμ κ²Ήμ³μ§λλ€. μ΄λ μκ°μ μΌλ‘ λ§€λ ₯μ μΈ λ μ΄μμμ λ§λλ κ°λ ₯ν κΈ°μ μ
λλ€.
5. λμ 그리λ μμ μμ± (JavaScript)
CSS 그리λ μμμ μ£Όλ‘ CSS κΈ°λ₯μ΄μ§λ§, μ½ν
μΈ λλ μ¬μ©μ μνΈ μμ©μ λ°λΌ 그리λ μμμ λμ μΌλ‘ μμ±ν΄μΌ νλ μλ리μ€μ μ§λ©΄ν μ μμ΅λλ€. μ΄λ JavaScriptλ₯Ό μ¬μ©νμ¬ grid-template-areas μμ±μ μ‘°μνκ±°λ μμμ grid-area κ°μ ν λΉν¨μΌλ‘μ¨ λ¬μ±ν μ μμ΅λλ€.
μλ₯Ό λ€μ΄, 그리λμ λ°°μΉν΄μΌ νλ κ΅¬μ± μμ μΈνΈκ° μκ³ κ΅¬μ± μμ μκ° λ³νλ κ²½μ°, JavaScriptκ° grid-template-areas λ¬Έμμ΄μ ꡬμ±νλ λ° λμμ μ€ μ μμ΅λλ€.
μ¬μ© μ¬λ‘: μμ ―μ μ¬λ°°μ΄ν μ μλ λμ보λ.
JavaScriptλ λ€μμ μνν μ μμ΅λλ€:
- λ‘컬 μ μ₯μμμ μμ ―μ μμλ₯Ό μ½μ΅λλ€.
- ν΄λΉ μμλ₯Ό κΈ°λ°μΌλ‘
grid-template-areasλ¬Έμμ΄μ λμ μΌλ‘ μμ±ν©λλ€. - μ΄ λ¬Έμμ΄μ λμ보λ 컨ν μ΄λμ μ μ©ν©λλ€.
κ°λ ₯νμ§λ§, 볡μ‘ν λμ μμ±μ λλλ‘ μ μ§λ³΄μνκΈ° μ΄λ €μ΄ CSSλ‘ μ΄μ΄μ§ μ μμΌλ―λ‘ μ μ€νκ² μ¬μ©ν΄μΌ ν©λλ€. κ°λ₯ν κ²½μ° μ μ CSS μ루μ μ μ°μ μνμμμ€.
μΌλ°μ μΈ ν¨μ κ³Ό νΌνλ λ°©λ²
그리λ μμμ΄ μ 곡νλ λͺ νμ±μλ λΆκ΅¬νκ³ , λͺ κ°μ§ μΌλ°μ μΈ μ€μκ° λ°μν μ μμ΅λλ€:
- μ΄λ¦ λΆμΌμΉ:
grid-template-areasμ μ¬μ©λ λͺ¨λ μ΄λ¦μ΄ μ§μ μ μΈ μμ μμμ ν΄λΉgrid-areaμμ±μ κ°μ§κ³ μλμ§ νμΈνκ³ , κ·Έ λ°λλ λ§μ°¬κ°μ§μ λλ€. μ€νκ° μμ£Ό λ°μνλ μμΈμ λλ€. - λΆκ· νν μμ μ μ:
grid-template-areasμ κ° νμ μ μλ μ μλ μΌκ΄λμ΄μΌ ν©λλ€. ν νμ 3κ°μ μ΄μ΄ μ μλ κ²½μ°, ν΄λΉ μ μμ λͺ¨λ νμ νλ κ°λ μ μΌλ‘ 3κ°μ μ΄μ κ°μ ΈμΌ ν©λλ€. ν νμ μ΄λ¦μ λ λ² μ¬μ©νλ©΄ ν΄λΉ μ΄λ¦μ λ κ°μ μ μ μ°¨μ§ν©λλ€. - μμ€ μμ 무μ: HTML μμ€μ μλ 그리λ νλͺ©μ μμκ° μ€ννΉ μ»¨ν μ€νΈμ μ κ·Όμ± λꡬμμ λμ λ°©μμ μν₯μ λ―ΈμΉλ€λ κ²μ κΈ°μ΅νμμμ€. 그리λ μμμ μκ°μ μ¬λ°°μΉλ₯Ό νμ©νμ§λ§, HTMLμμ μλ§¨ν± μμλ₯Ό κ³ λ €νμμμ€.
- κ³ μ λ¨μμ λν κ³Όλν μμ‘΄: νΉμ μ΄ λλΉκ° λλλ‘ νμνμ§λ§, νΉν ν
μ€νΈ κΈΈμ΄κ° λ€λ₯Ό μ μλ κΈλ‘λ² μ½ν
μΈ λ₯Ό λ€λ£° λλ λ°μν λ° μ μν λ μ΄μμμ μν΄
frλ¨μμ κ°μ μ μ°ν λ¨μλ₯Ό μ νΈνμμμ€. display: grid;λλ½: 그리λ μμ μμ±μ΄ μ μ©λλ €λ©΄ 컨ν μ΄λμdisplay: grid;λλdisplay: inline-grid;κ° μ μ©λμ΄μΌ ν©λλ€.
κ²°λ‘ : νλ μΉμ μν μλ§¨ν± λ μ΄μμ μμ©
CSS 그리λ μμμ λ¨μν λ μ΄μμ λꡬ μ΄μμ λλ€. μ΄λ μ맨ν±νκ³ μ½κΈ° μ¬μ°λ©° μ μ§λ³΄μκ° μ©μ΄ν νλ‘ νΈμλ μ½λλ₯Ό ν₯ν ν¨λ¬λ€μμ μ νμ λλ€. λͺ λͺ λ 그리λ μμμ μμ©ν¨μΌλ‘μ¨ μμ κ³Ό νμ λ€μμ μνν μ μμ΅λλ€:
- λλΌμ΄ μ©μ΄μ±κ³Ό λͺ νμ±μΌλ‘ 볡μ‘ν λ μ΄μμμ ꡬμΆν©λλ€.
- λ€μν μ₯μΉ λ° νλ©΄ ν¬κΈ°μμ μ°μνκ² μ μνλ κ³ λλ‘ λ°μμ μΈ λμμΈμ λ§λλλ€.
- νλ‘μ νΈμ μ μ§λ³΄μμ± λ° νμ₯μ±μ ν₯μμν΅λλ€.
- μΉ νμ΄μ§μ μλ§¨ν± λ¬΄κ²°μ±μ κ°μ ν©λλ€.
- λ€μν μΈμ΄ λ° λ μ΄μμ μꡬ μ¬νμ κ°μ§ κΈλ‘λ² μ¬μ©μλ₯Ό λ μ μμ©ν©λλ€.
μΉμ΄ κ³μ λ°μ ν¨μ λ°λΌ, ꡬ쑰νλκ³ μ μ κ°λ₯νλ©° μ맨ν±μ μΌλ‘ νλΆν λ μ΄μμμ λ§λλ λ₯λ ₯μ μ°μν νλ‘ νΈμλ κ°λ°μ μ΄μμΌλ‘ λ¨μ κ²μ λλ€. CSS 그리λ μμμ μ°μνκ³ κ°λ ₯ν μ루μ μ μ 곡νμ¬, λͺ¨λ νλ μΉ κ°λ°μμ ν΄ν·μμ μμ΄μλ μ λ λΆλΆμ΄ λ©λλ€.
μ€λ grid-template-areasλ‘ μ€νμ μμνκ³ , μΉ λ μ΄μμμμ μλ‘μ΄ μμ€μ μ μ΄λ ₯κ³Ό μλ§¨ν± λͺ
νμ±μ λ°κ²¬νμμμ€. λ―Έλμ λΉμ , λλ£, κ·Έλ¦¬κ³ κΈλ‘λ² μ¬μ©μλ€μ΄ λΉμ μκ² κ°μ¬ν κ²μ
λλ€.